<template>
    <div id="login" class="content">
        <!-- 页面标题 -->
        <div class="tilte-bar">绑定账号</div>
        <!-- 提交成功提示框 -->
        <div class="weui-toast" v-if="successFlag">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">登录成功</p>
            </div>
        <!-- 用户登录 -->
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label">用户名：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" v-model="loginList.user_loginname" placeholder="请输入用户名" id="user">
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label">密码：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" v-model="loginList.password" placeholder="请输入密码">
            </div>
        </div>
        <!-- 注册链接 -->
        <div class="link-wrap">
            <span>没有账号?</span>
            <router-link to='/regist/personalRegist' class="margin-right">个人用户注册入口</router-link>
            <router-link to='/regist/businessRegist' class="margin-right">企业用户注册入口</router-link>
        </div>
        <!-- 下一步按钮 -->
        <div>
            <div v-if="loginWarnning.tag" class="button-warnning">{{loginWarnning.message}}</div>
            <span class="weui-btn weui-btn_primary margin-1" @click="sendLogin">登录</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //登录成功标志
                successFlag: false,
                // 登录提示信息的标志
                loginWarnning: {
                    tag: false,
                    message: ''
                },
                // 登录名和密码
                loginList: {
                    user_loginname: '',
                    password: '',
                    openId: localStorage.userOpenId
                }
            }
        },
        methods: {
            // 调用登录接口
            sendLogin: function() {
                let _self = this;
                //判断用户名或密码是否为空
                if( !_self.loginList.user_loginname || !_self.loginList.password ) {
                    // 为空
                    _self.loginWarnning.tag = true;
                    _self.loginWarnning.message = '用户名或密码不能为空';
                } else {
                    console.log('调用接口')
                    _self.$http({
                        method: 'post',
                        url: 'checkLogin',
                        data: _self.loginList
                    }).then( response => {
                        console.log(response);
                        let data = response.data;
                        if(data.code === 0) {
                            //登陆成功，跳转到未完成订单页面
                            localStorage.userId = data.data.user_id;
                            _self.successFlag = true;
                            setTimeout(function(){
                                window.location.href="./#/dev_main/order_type/0";
                            },1500);
                        } else {
                            // 登陆失败
                            _self.loginWarnning.tag = true;
                            _self.loginWarnning.message = data.msg;
                        }
                    })
                }
            }
        }
    }
</script>

<style>
    .margin-1 {
        margin: 1rem;
    }
    .link-wrap {
        margin-top: .3rem;
        text-align: center;
    }
    .margin-right {
        margin-right: .5rem;
        color: #576b95;
    }
</style>